<template>
	<view style="padding-bottom: 50rpx;">
		<up-form labelPosition="left" class="apply-form-field" :labelStyle="labelStyle" :borderBottom="true"
			ref="wuLiuRef" :model="wuLiu">
			<up-form-item :borderBottom="true" label-width="140" label="车牌号" required prop="carCard">
				<up-input v-model="wuLiu.carCard" placeholder="请输入车牌号" clearable>
					<template #suffix>
						<up-button text="选择车牌" type="primary" size="mini" @click.native='driverShowClick'></up-button>
					</template>
				</up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="承运司机" required prop="carryDriver">
				<up-input v-model="wuLiu.carryDriver" placeholder="请输入承运司机" clearable></up-input>
			</up-form-item>
			<up-form-item :borderBottom="true" label-width="140" label="手机号" required prop="phone">
				<up-input v-model="wuLiu.phone" placeholder="请输入手机号" clearable></up-input>
			</up-form-item>
			<!-- #ifdef APP-->
			<up-form-item :borderBottom="true" label-width="140" label="预计到园区时间" required @tap="driverDateClick()"
				prop="arrivalTime">
				<up-input v-model="wuLiu.arrivalTime" placeholder="请选择时间" readonly></up-input>
			</up-form-item>
			<!-- #endif -->
			<!-- #ifdef H5-->
			<up-form-item :borderBottom="true" label-width="140" label="预计到园区时间" required prop="arrivalTime">
				<up-input v-model="wuLiu.arrivalTime" placeholder="请选择时间"
					@click.native="driverDateShow=true" @focus='blur'></up-input>
			</up-form-item>
			<!-- #endif -->
		</up-form>
		<view style="margin-top: 50rpx;padding: 0rpx 30% 0rpx 30%;">
			<up-button type="primary" color="green" shape="circle" text="物流保存" @click="wuLiuSave" :loading="loading"></up-button>
		</view>
		<lzcPicker ref="lzcPicker" @change="driverConfirm" :pickerList="carryList" pickerTittle='点击车牌即可,若无车牌,请手动填写' />
		<u-datetime-picker :show="driverDateShow" v-model="arrivalTime" mode="datetime" closeOnClickOverlay
			@confirm="arrivalTimeConfirm" @cancel="driverDateShow =false"
			@close="driverDateShow =false"></u-datetime-picker>
			
		<!-- 消息提示	 -->
		<u-toast ref="uToast" />	
	</view>
</template>

<script>
	import lzcPicker from '@/components/driver-picker/lzc-picker.vue';
	import wuliuApi from '@/apis/gyl/wuliu.js';
	export default {
		components: {
			lzcPicker,
		},
		props:{
			data:{
				type:String,
				default:null
			}
		},
		data() {
			return {
				loading: false,
				labelStyle: {
					color: '#aaa',
					fontSize: '30rpx'
				},
				wuLiu: {
					carCard: null,
					carryDriver: null,
					phone: null,
					arrivalTime: null,
				},
				id:null,
				driverDateShow: false,
				carryList: [],
				sourceCarryList: [],
				arrivalTime: Number(new Date()),
				driverRules: {
					carCard: [{
						required: true,
						message: '请填写/选择车牌号',
						trigger: ['blur', 'change']
					}],
					carryDriver: [{
						required: true,
						message: '请填写承运司机',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}],
					arrivalTime: [{
						required: true,
						message: '请选择预计到园区时间',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		methods: {
			/**
			 * 禁止弹出
			 */
			async blur() {
				await uni.hideKeyboard();
			},
			/**
			 * app 调用
			 */
			driverDateClick() {
				this.driverDateShow = true;
			},
			driverShowClick() {
				this.$refs.lzcPicker.handleShow();
			},
			driverConfirm(index) {
				const data = this.sourceCarryList[index];
				this.wuLiu.carCard = data.carCard;
				this.wuLiu.carryDriver = data.carryDriver;
				this.wuLiu.phone = data.phone;
			},
			/**
			 * 预计到园区时间
			 */
			arrivalTimeConfirm() {
				const timeFormat = uni.$u.timeFormat;
				this.wuLiu.arrivalTime = timeFormat(this.arrivalTime, 'yyyy-mm-dd hh:MM')
				this.driverDateShow = false;
			},
			async wuLiuSave() {
				var flag = false;
				await this.$refs.wuLiuRef.validate().then(res => {
                    flag = true;
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
                if(flag){
					this.loading = true;
					const res = await wuliuApi.saveLogistic({
						data: this.wuLiu,
						saleId: this.id
					});
					if (res.success) {
					    this.$refs.uToast.show({
						    type: 'success',
					  	    message: '物流分配成功',
						    duration: 1500, // 设置适当的持续时间
						    complete: () => {
                               uni.navigateBack()
						    },
					    });							
						// uni.showToast({
						// 	icon: 'none',
						// 	duration: 3000,
						// 	title: '物流分配成功'
						// });
						// uni.navigateBack()
					} else {
						this.loading = false;
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: '物流分配失败'
						});
					}
				}
			},
			async getCarryList() {
				const res = await wuliuApi.selectAll();
				if (res.success) {
					this.sourceCarryList = res.data;
					const carCardList = res.data.map((item, index) => ({
						carCard: item.carCard,
						index: index
					}));
					this.carryList = carCardList;
				}
			},
			/**
			 * 获取物流数据
			 */
			async getWUliu() {
				const res = await wuliuApi.getLogisic(this.id);
				if (res.success) {
					if (res.data) {
						this.wuLiu = res.data;
					} else {
						this.wuLiu = {};
					}
			
				}
			},
		},

		mounted() {
			this.id = this.data;
			this.$refs.wuLiuRef.setRules(this.driverRules);
			this.getCarryList();
			this.getWUliu();
		}
	}
</script>

<style>

</style>